
<template>
    <div class="home-map"
         id="map-line">
    </div>
</template>

<script>
    // 引用
    require('proj4')
    require('proj4leaflet')
    import { URLS_MAP } from '@/urls.js'
    import Vue from 'vue'
    export default {
        //**** el, name
        //**** components, directives
        //**** extends, mixins, provide/inject
        //**** props, data, computed
        props: {
            line: {//画线数据
                type: Array,
            }
        },
        data() {
            this.oMap = null;//地图主体
            return {
            }
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        watch: {
            line: {
                handler(aData) {
                    this.fCreatLine(aData)
                },
                immediate: true,
                deep: true,
            }
        },
        mounted() {
            this.fInitMap()
        },
        beforeDestroy() {
            this.oMap.remove();
        },
        //**** methods
        methods: {
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数
            //*** 其他
            fCreatLine(aData) {//轨迹线
                // 将地图放大到多边形的位置
                let aLats = []
                aData.forEach(oItem => {
                    aLats.push([oItem.latitude, oItem.longitude])
                })
                if (!aLats.length) return
                let oPolyline = L.polyline(aLats, {
                    color: '#E04C4C',
                    weight: 8,
                }).addTo(this.oMap);
                let aTest = [
                    [oPolyline.getBounds()._northEast.lat, oPolyline.getBounds()._northEast.lng],
                    [oPolyline.getBounds()._southWest.lat, oPolyline.getBounds()._southWest.lng]
                ]
                this.$nextTick(() => {
                    this.oMap.fitBounds(oPolyline.getBounds());

                })
            },
            fInitMap() {// 地图初始化 本地
                //百度
                const Crs = new L.Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs', {
                    resolutions: function () {
                        let level = 19
                        let res = [];
                        res[0] = Math.pow(2, 18);
                        for (let i = 1; i < level; i++) {
                            res[i] = Math.pow(2, (18 - i))
                        }
                        return res;
                    }(),
                    origin: [0, 0],
                    bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
                });

                this.oMap = L.map('map-line', {
                    minZoom: 1,
                    maxZoom: 18,
                    center: [39.608266, 109.781327],
                    zoom: 12,
                    zoomControl: false,
                    attributionControl: true,
                    crs: Crs
                });
                L.tileLayer('http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1', {
                    subdomains: '0123456789',
                    tms: true
                }).addTo(this.oMap);
            },


        },
        //**** template, render
    }
</script>

<style lang="less" rel="stylesheet" scoped>
    .home-map {
        width: 100%;
        height: 100%;
    }
</style>
